<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../../js/vue/vue.min.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="plugins/elementui/index.js"></script>
    <title>sys</title>
    <meta name="robots" content="noindex, nofollow"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="../../js/docs/css/bootstrap-4.5.2.min.css" type="text/css">
    <link rel="stylesheet" href="../../js/docs/css/bootstrap-example.min.css" type="text/css">
    <link rel="stylesheet" href="../../js/docs/css/prettify.min.css" type="text/css">
    <link rel="stylesheet" href="../../js/docs/css/fontawesome-5.15.1-web/all.css" type="text/css">
    <script type="text/javascript" src="../../js/docs/js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="../../js/docs/js/bootstrap.bundle-4.5.2.min.js"></script>
    <script type="text/javascript" src="../../js/docs/js/prettify.min.js"></script>

    <link rel="stylesheet" href="../../js/dist/css/bootstrap-multiselect.css" type="text/css">
    <script type="text/javascript" src="../../js/dist/js/bootstrap-multiselect.js"></script>

    <script src="../../js/util/ajaxFactory.js"></script>
    <script src="../../js/util/crudVueFactory.js"></script>
    <script src="../../js/util/pageMe.js"></script>
    <script src="../../js/config/config.js"></script>

    <!--<script src="../../js/vue/vue.min.js"></script>-->
   <!-- <script src="../../js/util/vue.js"></script>-->
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../../css/bootstrap.min-lumen.css" rel="stylesheet">
    <link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../../css/plugins/pageMe/pageMe.css" rel="stylesheet"/>
    <link href="../../css/plugins/progressbar/mprogress.css" rel="stylesheet"/>
    <link href="../../css/plugins/progressbar/style.css" rel="stylesheet"/>

</head>
<body class="gray-bg">
<div id="body">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>用户表管理模块</h5>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="clearfix hidden-xs"></div>
                    <div class="col-sm-12">
                        <!-- Example Checkbox Select -->
                        <div class="example-wrap">

                            <!-- 查询区域 -->
                            <div id="queryModel" tagId="queryTag">
                                <input type="text" v-model="roleName" placeholder="角色名"
                                       style="margin-top: 10px"/>&nbsp;
                                <input type="text" v-model="createTime" placeholder="创建时间"
                                       style="margin-top: 10px"/>&nbsp;
                                <button type="button" class="btn btn-primary btn-sm" @click="queryInfo()">查询</button>&nbsp;
                                <button type="button" class="btn btn-primary btn-sm" @click="exportExcel()">导出excel
                                </button>
                            </div>
                            <!-- 查询区域 end-->

                            <!-- 添加数据区域 -->
                            <div style="text-align: right; margin: 8px">
                                <button tagId="addTag" type="button" class="btn btn-success btn-sm" onclick="addMsg()"
                                        style="margin: 8px">
                                    添加数据
                                </button>
                            </div>

                            <!-- 查询结果表格显示区域 -->
                            <div id="newsContent" class="table-responsive" style="overflow: scroll;" v-cloak>
                                <table class="table table-hover table-bordered text-nowrap">
                                    <tr>
                                        <th>操作</th>
                                        <th>可操作菜单</th>
                                        <th>角色名</th>
                                        <th>描述</th>
                                        <th>创建时间</th>
                                        <th>更新时间</th>

                                    </tr>
                                    <tbody id="dataTable">
                                    <tr v-for="data in result">
                                        <td>
                                                <span tagId="upTag"><button type="button" class="btn btn-info btn-sm"
                                                                            @click="upMsg(data.id,'/role/select')">
                                                    更新
                                                </button>&nbsp;</span>
                                            <span tagId="delTag"><button type="button" class="btn btn-danger btn-sm"
                                                                         @click="delMsg(data.id,'/role/delete')">
                                                    删除
                                                </button>&nbsp;</span>
                                        </td>
                                        <td>{{data.menuName}}</td>
                                        <td>{{data.roleName}}</td>
                                        <td>{{data.description}}</td>
                                        <td>{{data.createTime}}</td>
                                        <td>{{data.updateTime}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div id="pageID" class="page_div"></div>
                            </div>
                            <!-- 查询结果表格显示区域 end-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改模态框 -->
    <div class="modal fade" id="updateModal" tabindex="-1" roleEntity="dialog" aria-labelledby="updateModalLabel">
        <div class="modal-dialog" roleEntity="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="updateModalLabel">修改信息</h4>
                </div>
                <div class="modal-body" id="updateModalBody">
                    <form>
                        <div class="form-group">
                            <label for="roleName-attr" class="control-label">角色名:</label>
                            <input type="text" class="form-control" id="roleName-attr"
                                   v-model="roleName"/>
                        </div>
                        <div class="form-group">
                            <label for="description-attr" class="control-label">描述:</label>
                            <input type="text" class="form-control" id="description-attr"
                                   v-model="description"/>
                        </div>
                        <div class="form-group">
                            <label for="description-insert" class="control-label">菜单:</label>
                            <span>
                            <el-select :popper-append-to-body="false" v-model="menuId" multiple placeholder="请选择">
                                <el-option
                                        v-for="m in menu"
                                        :key="m.id"
                                        :label="m.menuName"
                                        :value="m.id">
                                </el-option>
                            </el-select>
                                </span>
                        </div>
                        <div class="form-group">
                            <input type="hidden" class="form-control" id="id-attr"
                                   v-model="id"/>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="confirmUp()">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加模态框 -->
    <div class="modal fade" id="addModal" tabindex="-1" roleEntity="dialog" aria-labelledby="addModalLabel">
        <div class="modal-dialog" roleEntity="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="addModalLabel">添加信息</h4>
                </div>
                <div class="modal-body" id="addModalBody">
                    <form>
                        <!-- <div class="form-group">
                             <label for="id-insert" class="control-label">主键:</label>
                             <input type="text" class="form-control" id="id-insert"
                                    v-model="id"/>
                         </div>-->
                        <div class="form-group">
                            <label for="roleName-insert" class="control-label">角色名:</label>
                            <input type="text" class="form-control" id="roleName-insert"
                                   v-model="roleName"/>
                        </div>
                        <div class="form-group">
                            <label for="description-insert" class="control-label">描述:</label>
                            <input type="text" class="form-control" id="description-insert"
                                   v-model="description"/>
                        </div>
                        <div class="form-group">
                            <label for="description-insert" class="control-label">菜单:</label>
                            <span>
                            <el-select :popper-append-to-body="false" v-model="menuId" multiple placeholder="请选择">
                                <el-option
                                        v-for="m in menu"
                                        :key="m.id"
                                        :label="m.menuName"
                                        :value="m.id">
                                </el-option>
                            </el-select>
                                </span>
                        </div>
                        <!--  <div class="form-group">
                              <label for="createTime-insert" class="control-label">创建时间:</label>
                              <input type="text" class="form-control" id="createTime-insert"
                                     v-model="createTime"/>
                          </div>
                          <div class="form-group">
                              <label for="updateTime-insert" class="control-label">更新时间:</label>
                              <input type="text" class="form-control" id="updateTime-insert"
                                     v-model="updateTime"/>
                          </div>-->

                    </form>
                </div>
                <div class="modal-footer">
                    <button id="addRole" type="button" class="btn btn-primary" @click="confirmAdd()">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <script src="../../js/content.js?v=1.0.0"></script>


    <!-- Bootstrap table -->
    <script src="../../js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../../js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="../../js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <!-- Peity -->
    <!-- <script src="../../js/demo/bootstrap-table-demo.js"></script> -->

    <script src="../../js/util/ajaxFactory.js"></script>
    <script src="../../js/util/crudVueFactory.js"></script>
    <script src="../../js/util/pageMe.js"></script>
    <script src="../../js/config/config.js"></script>
    <script src="../../js/plugins/layer/layer.min.js"></script>
    <script src="../../js/plugins/progressbar/init-mprogress.js"></script>
    <script src="../../js/plugins/progressbar/mprogress.js"></script>

    <script>
      /*import table from "./element-ui/packages/table/src/table";*/

      var currentPage = 1
      var totalPage
      var sqlMap = {}
      //排序的数据
      var orderData = []
      var controllerPrefix = 'role'
      var methodName = 'likeSelect'

      var queryVue = new Vue({
          el: '#queryModel',
          data: {
            roleName: '',
            createTime: ''
          },
          methods: {
            queryInfo: function () {
              sqlMap = {}
              sqlMap.roleName = this.roleName
              sqlMap.createTime = this.createTime

              currentPage = 1
              orderData = []
              $crud.getDataByCurrentPage()
            }
            ,
            exportExcel: function () {

              //显示进度条
              InitMprogress()

              var param = ''

              for (var key in sqlMap) {
                if (sqlMap[key] != '') {
                  param += key + '=' + sqlMap[key] + '&'
                }
              }

              window.location.href = basePath + '/' + controllerPrefix
                + '/exportExcel?' + param
              // 进度条消失
              setTimeout('MprogressEnd()', totalPage / 20 * 1000)
            }
          }

        })


      function makeResult (data) {
        for (var i = 0; i < data.length; i++) {
          if (data[i] == null) {
            data[i] = {}
            data[i]['id'] = '无'
            data[i]['roleName'] = '无'
            data[i]['description'] = '无'
            data[i]['createTime'] = '无'
            data[i]['updateTime'] = '无'

          }
        }
      }

      var tableVue = new Vue({
        el: '#newsContent',
        data: {
          result: {
                menuName:[]
          },

        },
        //created:
        mounted: function () {
          $crud.getDataByCurrentPage()
        },

        methods: {

          upMsg: function (id, path) {

            $z.ajaxPost({
              url: basePath + path,
              data: {
                id: id
              },
              success: function (data) {
                $z.dealCommonResult(data, function () {
                  data = data.data
                  upVue.id = data['id']
                  upVue.roleName = data['roleName']
                  upVue.description = data['description']
                  upVue.menuId = data['menuId']
                  $('#updateModal').modal('show')
                })
              }
            })

          },
          delMsg: function (id, path) {
            layer.confirm('<em style=\'color:black\'>' + '执行删除后将无法恢复，确定继续吗？' + '</em>', {
              icon: 3,
              offset: '200px',
              title: '温馨提示'
            }, function (index) {
              //do something
              $z.ajaxPost({
                url: basePath + path,
                data: {
                  id: id
                },
                success: function (data) {
                  $z.dealCommonResult(data, function () {
                    $crud.getDataByCurrentPage()
                    layer.alert('<em style=\'color:black\'>' + '删除成功！' + '</em>', {
                      icon: 6,
                      offset: '200px',
                      title: '提示'
                    })
                  })
                }
              })

              layer.close(index)
            })
          }
        }
      })

      var upVue = new Vue({
          el: '#updateModal',
          data: {
            id: '',
            roleName: '',
            description: '',
              menuId:[],
              menu:[
              ]
          },
          created(){
              $z.ajaxPost({
                  url: basePath + "/menu/selectAll",
                  success : function (data) {
                      $z.dealCommonResult(data, function () {
                          upVue.menu=data.data;
                      });

                  }
              })
          },
          methods: {
            confirmUp: function () {
              $z.ajaxPost({
                url: basePath + '/' + controllerPrefix + '/update',
                data: {
                  id:
                  this.id,
                  roleName:
                  this.roleName,
                  description:
                  this.description,
                    menuId: this.menuId
                },
                success: function (data) {
                  $z.dealCommonResult(data, function () {
                    layer.alert('<em style=\'color:black\'>' + '更新成功！' + '</em>', {
                      icon: 6,
                      offset: '200px',
                      title: '提示'
                    })
                    $('#updateModal').modal('hide')
                    $crud.getDataByCurrentPage()
                  })

                }
              })

            }
          }
        })


      function addMsg () {
        $('#addModal').modal('show')
      }

      var addVue = new Vue({

          el: '#addModal',
          data: {
            id: '',
            description: '',
            roleName: '',
            updateTime: '',
            menuId:[],
              menu:[
              ]
          },
          created(){
              $z.ajaxPost({
                  url: basePath + "/menu/selectAll",
                  success : function (data) {
                      $z.dealCommonResult(data, function () {
                          addVue.menu=data.data;
                          console.log(addVue.menu)
                      });

                  }
              })
          },
          methods: {
            confirmAdd: function () {
              $z.ajaxPost({
                url: basePath + '/' + controllerPrefix + '/add',
                data: {
                  id: this.id,
                  roleName: this.roleName,
                  description: this.description,
                  createTime: this.createTime,
                  updateTime: this.updateTime,
                  menuId: this.menuId
                },
                success: function (data) {
                  $z.dealCommonResult(data, function () {
                    layer.alert('<em style=\'color:black\'>' + '添加成功！' + '</em>', {
                      icon: 6,
                      offset: '200px',
                      title: '提示'
                    })
                    $('#addModal').modal('hide')
                    //初始化
                    sqlMap = {}
                    currentPage = 1
                    $crud.getDataByCurrentPage()
                  })

                }
              })

            }
          }
        })

    </script>

</div>
</body>
</html>
